<template>
  <div class="bread-crunmb" :style="headDivBackground">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
        v-for="one in pathNames"
        :to="{ path: one.pathUrl }"
        :key="one.id">
        {{one.pathName}}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'breadCrunmb',
  data () {
    return {
      headDivBackground: {}
    }
  },
  // 面包屑组件组件
  // pathNames: [{
  //    id: 1
  //    pathUrl: '/index',
  //    pathName: '首页'
  // }]
  props: [ 'imgUrl', 'pathNames' ],
  created () {
    this.headDivBackground = {
      backgroundImage: 'url(' + require('../../' + this.imgUrl) + ')',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center center',
      backgroundSize: '100% auto'
    }
  }
}
</script>

<style lang="scss">
.bread-crunmb {
  height: 280px;

  .el-breadcrumb {
    height: 100%;
    margin-left: 40%;
    padding-top: 105px;

    .el-breadcrumb__item {
      font-size: 30px;
      .el-breadcrumb__inner{
        color: #f7ebeb;
      }
    }
    .el-breadcrumb__item:last-child {
      font-size: 40px;
      .el-breadcrumb__inner{
        color: #f3923d;
      }
    }
  }
}
</style>
